VUE의 VUE-CLI1 / 2 프로젝트를 설정할 때 웹팩 구성에 많은 문서가 볼 수 있습니다. 우리는 단순히 콘솔을 입력 어떤 역할을하는 지루한 구성 파일 모르는 npm run dev자동으로 프로젝트를 시작을, 우리는 행복하게 비즈니스 코드를 작성할 수 있습니다.
VUE-CLI는 우리가 웹팩 아직 배울 수있는 모든 것을 할 수 있도록하지만? NoNoNo ... 현대 프런트 엔드 엔지니어 필요한 기술을 볼 수있는 전면 JD 모집 사이트 믿지 않는 사람들에게, 모듈 형 빌딩 프로젝트를 패키지됩니다. 아도,의 간단한 웹팩과 VUE-CLI를 구축 할 수 있습니다.
1 단계 : NodeJS (웹팩 기반 NodeJS)를 설치
다운로드 : http://nodejs.cn/download/를 설치 바보, 다음 단계는 확인했을 것이다. 콘솔의 입력에 설치하는 것은 node -v성공 여부에 따라 확인한다.
NodeJS는 웹 브라우저와 같은 자바 스크립트 런타임 환경입니다. 설치 후 수
node와 같은 자바 스크립트 코드 명령을 실행합니다 :node a.js
NPM 액션 (노드 패키지는 자바 스크립트의 관리) : Node.js를이 NPM, 비슷한 천둥 자료를 다운로드 한 후 제공 / 프로그램 모듈이 의존 패키지를 다운로드 할 수 있습니다.
- NPM은 사용자가 현지 사용에 다른 사람 타사 패키지에 의해 작성된 서버에서 다운로드 할 수 있습니다.
- 그것은 사용자가 서버에서 로컬 NPM 사용하는 다른 사람에 의해 쓰여진 명령 줄 프로그램을 다운로드하고 설치할 수 있습니다.
- 그것은 사용자가 사용하는 다른 사람을 위해 서버에 업로드 자신의 가방이나 명령 줄 프로그램 NPM을 작성할 수 있습니다.
NPM 설치 -g cnpm --registry = HTTPS : //registry.npm.taobao.org NPM이 느려질 수 있습니다, cnpm를 설치하는 것이 좋습니다, 해외 설치 방법
단계 : npm init초기화 package.json을 생성
- 첫째, 빈 프로젝트 폴더를 생성,
- 폴더에
shift+右击나타납니다, [명령 창 (W) 여기를 열] - 로 클릭
cmd콘솔, 명령은 현재 폴더 디렉토리의 경로이며, - 그런 다음 입력
npm init -y루트 디렉토리에 생성 된 package.json 후 입력합니다.
전체 프로젝트를 저장하는 데 사용 package.json 우리가 다른 곳으로 전체 프로젝트를 마이그레이션 할 때, 프로젝트에 필요한 런타임 모듈 / 팩이 종속 변수가 자동으로 다운로드 package.json에 따라 종속 모듈 / 팩입니다.
3 단계 : 웹팩 설치
명령 :npm install [email protected] --save-dev
웹팩 테스트는 로컬로 볼 수 webpack -v있는 경우 webpac잘못된 명령 K이며, 다음 글로벌 설치 웹팩을 사용합니다 npm install [email protected] -g. 성공적인 설치 후 사용할 수 있습니다 webpack을 재생하는 명령을 사용합니다.
제안 된 설치 wepack3는 webpack4 호환 VUE-CLI는 매우 좋지 않다
웹팩 포장 모듈 볼 수 있습니다 : 그것은 직접 실행하고 변환으로 포장 할 수없는 자바 스크립트 모듈뿐만 아니라 다른 브라우저 찾기 언어 (SCSS, 타이프 라이터 등), 프로젝트 구조를 분석하면됩니다 확장 브라우저가 사용하는 적절한 형식입니다.
그런트와 꿀꺽가 작동 : 구성 파일에 일부 특정 단계와 유사한 편집, 조합, 압축 및 기타 작업 파일을 지정, 이러한 작업은 도구 후 자동으로 수행 할 수 있습니다.
4 단계 : 웹팩 패키지 모듈
대부분의 파일 형식, 같은 VUE, CSS, IMG, 글꼴 ... 우리는 분석하고 포장이 제대로 완료 로더를 구성해야합니다.
예를 들어, CSS, JS 파일에 패키지, 당신은 CSS 로더 설치 명령을 설치해야 npm install --save-dev style-loader css-loader
css-loader하고 style-loader, 다른 작업과 모두 거래를
css-loader비슷한 사용할 수 있도록 @import 和 url(...)달성하기 위해 방법을 require()기능
style-loader에 의해 모든 계산 후 스타일을 <style></style>추가 페이지, 두 당신이 포장 웹팩 후 스타일 시트 포함 된 JS 파일을 넣을 수 있도록 함께 그룹화
명령 줄 패키지를 (권장하지 않음) :
webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动创建dist目录때 이러한 포장을 지정하려면, JS 파일 CSS 파일의 도입 loader: require('style-loader!css-loader!../css/index.css')순서가 잘못 될 수 없습니다!
구성 파일은 포장됩니다 (권장) :
다음과 같이 구성된 프로젝트의 루트 디렉토리에 webpack.config.js을 작성해야합니다 :
module.exports = {
entry: __dirname + "/src/main.js",// 入口文件，可以多个
output: {
path: __dirname + "/dist", // 绝对路径，打包后的文件存放的文件夹
filename: "build.js" // 相对路径，打包后输出的文件
},
// 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules
// 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以写成 require('../css/index.css')
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpg|png|jpeg|svg)$/,
loader: 'url-loader',
options: {
// 大于10000字节会被打包成重命名的图片资源，否则打包成base64
limit: 10000
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env'], // 处理关键字，es6/7/8/9...都能转化
plugins: ['transform-runtime'] // 处理函数
}
}
]
}
}구성 package.json
scripts:{"build": 'webpack'}(webpack기본 실행 명령webpack.config.js파일), 실행npm run build까지 포장 할 수
5 단계 : 웹팩 서버를 구축 할 수
위의 네 단계는 포장 프로젝트의 작업을 완료,뿐만 아니라 더 개발 환경을 구성해야합니다.
webpack-dev-server우리는 서버를 구축 당신이 프로젝트의 핫 아이템 코드, 실시간 작업을 업데이트 할 수 있도록, PHP / 자바 / .NET ... 같은 빌드처럼 될 수 있습니다. 이것은 우리가 프로젝트를 디버깅하는 데 도움이됩니다.
- 설치 :
npm install webpack-dev-server -g - 에 의존 쓰기 :
npm install webpack-dev-server --save-dev - 구성 명령
scripts:{"dev": 'webpack-dev-server --hot --inline'}뜨거운 업데이 트를 실현하고 온라인 컴파일 // - 명령을 실행 :
npm run dev - localhost를 입력 : 8080 / 실행 ... // 기본 포트를 웹팩-DEV-서버 8080
특정 코드를 참조하십시오 https://github.com/cwh2407606301/webpack-vue-cli
마지막으로, 웹팩 버전 업데이트가 매우 자주, 자주 오류에 호환성 문제로 이어질 수있는 매우 자주 업데이트되는 다양한 NPM 패키지, 이것은 두통, 포기 항목에서 야기하기 쉽다. 인내, 인내, 인내 ....